<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>商品详情</title>
    <link rel="stylesheet" type="text/css" href="./static/css/app.css">
</head>
<body class="F5">
<div id="app" class="product-page">
    <div class="top-wrap">
        <div class="carousel-container" id="carousel1">
            <div class="carousel-wrapper">
                <a href="#" class="carousel-item">
                    <img src="./static/images/product5.png" alt="">
                </a>
                <a href="#" class="carousel-item">
                    <img src="./static/images/product5.png" alt="">
                </a>
                <a href="#" class="carousel-item">
                    <img src="./static/images/product5.png" alt="">
                </a>
            </div>
            <div class="carousel-dots"></div>
            <div class="carousel-page"></div>
        </div>
        <div class="go-down" onclick="toNext()"><img src="./static/images/down.png" alt=""></div>
        <div class="title">商品详情</div>
    </div>
    <div class="info-box">
        <div class="title ellipsis-1">XX会员俱乐部卷纸</div>
        <div class="bt">
            <div class="left">
                <img src="./static/images/point.png" alt="">
                <span>5000</span>
                <div class="market-price">
                    <div class="text">市场价</div>
                    <div class="price">￥88.6</div>
                </div>
            </div>
            <div class="right">
                <div class="text">月兑换量: 22</div>
                <div class="li"></div>
                <div class="text">库存: 48</div>
            </div>
        </div>
    </div>
    <div class="options-wrap">
        <div class="row-1">
            <div class="left">
                <div class="label">选择</div>
                <div class="value">规格/套餐</div>
            </div>
            <div class="right">
                <img src="./static/images/right6.png" alt="">
            </div>
        </div>
        <div class="row-2">
            <div class="left">
                <div class="label">发货</div>
                <div class="value">广东广州 <span>丨</span> 快递：免运费</div>
            </div>
        </div>
        <div class="row-3">售后无忧<span>·</span>品质保证<span>·</span>极速退款</div>
    </div>
    <div class="product-detail">
        <div class="detail-top">
            <div class="zz"></div>
            <div class="title">商品详情</div>
        </div>
        <div class="content">
            杰盾润滑油坚守“质量永远领先一步”的价值观打破 “ 符合标准即为合格” 的狭隘观念。
            <img src="./static/images/product5.png" alt="">
        </div>
    </div>
    <div class="bottom-wrap">
        <div class="z-height"></div>
        <div class="fixed-bottom">
            <div class="left">
                <div class="text">可用积分：</div>
                <div class="price">889,999</div>
            </div>
            <div class="right">立即兑换</div>
        </div>
    </div>
</div>
<script src="./static/js/common.js"></script>
<script>
    const carousel = new Carousel('carousel1', 4000);
    function toNext() {
        carousel.showNextSlide()
    }
</script>
</body>
</html>